<nz-card>
  <nz-skeleton [nzActive]="true" [nzLoading]="loading" [nzParagraph]="{ rows: 6 }">

    <ng-container>
      <label
        nz-checkbox
        [(nzChecked)]="model.email_notifications_enabled"
        (nzCheckedChange)="updateSettings()"
        class="d-flex align-items-baseline mb-2"
      >
        <h4 class="mb-0" nz-typography>发送电子邮件通知给我</h4>
      </label>
      <p class="mb-0" nz-typography nzType="secondary">
        这包括新的任务分配。
      </p>

      <nz-divider class="my-3"></nz-divider>
    </ng-container>

    <ng-container>
      <label
        nz-checkbox
        [(nzChecked)]="model.daily_digest_enabled"
        (nzCheckedChange)="updateSettings()"
        class="d-flex align-items-baseline mb-2"
      >
        <h4 class="mb-0" nz-typography>发送每日摘要给我</h4>
      </label>
      <p class="mb-0" nz-typography nzType="secondary">
        每晚，您将收到任务的最新活动摘要。
      </p>

      <nz-divider class="my-3"></nz-divider>
    </ng-container>

    <ng-container>
      <label
        nz-checkbox
        [(nzChecked)]="model.popup_notifications_enabled"
        (nzCheckedChange)="updateSettings();requestPermissions()"
        class="d-flex align-items-baseline mb-2"
      >
        <h4 class="mb-0" nz-typography>当 Worklenz 打开时，在我的电脑上弹出通知</h4>
      </label>
      <p class="mb-0" nz-typography nzType="secondary">
        浏览器可以禁用弹出通知。更改浏览器设置以允许它们。
      </p>

      <nz-divider class="my-3"></nz-divider>
    </ng-container>

    <ng-container>
      <label
        nz-checkbox
        [(nzChecked)]="model.show_unread_items_count"
        (nzCheckedChange)="updateSettings()"
        class="d-flex align-items-baseline mb-2"
      >
        <h4 class="mb-0" nz-typography>显示未读项目的数量</h4>
      </label>
      <p class="mb-0" nz-typography nzType="secondary">
        您将看到每个通知的计数。
      </p>
    </ng-container>

  </nz-skeleton>
</nz-card>
